<template>
  <div class="page-min">
    <el-table
            max-height="720"
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            border
            :header-cell-style="{background:'#F0F1F6',color:'#333'}"
            style="width: 100%;">
      <template v-for="(item, index) in columnList">
        <el-table-column
                :key="index"
                :label="item.label"
                :prop="item.prop"
        >
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
            style="float: right; margin-right: 50px; margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
    </el-pagination>
  </div>
</template>

<script>
  import { projectAccountsReceivableList } from "@/api/report"

export default {
  components:{

  },
  data() {
    return {
      tableData:[

      ],
      currentPage: 1,
      total: 0,
      pageSize:10,
      columnList:[
        {label:'项目名称', prop:'projectName'},
        {label:'项目金额', prop:'collectionAmount'},
        {label:'已开票金额', prop:'invoiceAmount'},
        {label:'已收金额', prop:'contractAmount'},
        {label:'未收金额', prop:'contractUncollected'},
      ]
    }
  },
  methods: {
    getList(){
      projectAccountsReceivableList({page:1,pageSize:10,data:{}}).then((r) => {
        if (r.code !== 200) {
          this.$message.error(r?.msg)
          this.tableData =[]
        }
        else {
          if (r.rows.length){
            this.tableData = r?.rows
            this.total = r?.total
          }else {
            this.tableData =[]
          }
        }
      })
    },
    handleSizeChange(size){
      this.pageSize = size
    },
    handleCurrentChange(current){
      this.currentPage = current
    },
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
</style>